<template>
  <div class="container">
    <div v-if="route.name === 'blist'">
      <!-- 页面标题 -->
      <div class="page-title">题库</div>

      <!-- 标签区域 -->
      <div class="tags-container">
        <a-button
          v-for="tag in tags"
          :key="tag.id"
          type="text"
          :class="{
            'tag-button': true,
            'tag-button-primary': tag.name === selectedTagName,
          }"
          @click="handleTagClick(tag)"
        >
          {{ tag.name }}
        </a-button>
      </div>

      <!-- 卡片区域 -->
      <a-row class="card-container" :gutter="24">
        <a-col
          v-for="card in allCards"
          :key="card.id"
          :xs="24"
          :sm="12"
          :lg="8"
          :xl="6"
          class="card-col"
        >
          <CardComponent
            :title="card.title"
            :description="card.description"
            :image="card.image"
            :likes="card.likes"
            :stars="card.stars"
            :shares="card.shares"
            @click="handleCardClick(card)"
          />
        </a-col>
      </a-row>
    </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import CardComponent from './components/quality-inspection.vue';

  const router = useRouter();
  const route = useRoute();
  const { tagName } = route.query;
  // const { questionBankId } = route.query;
  // 模拟标签数据
  const tags = ref([
    { id: 1, name: '热门' },
    { id: 2, name: '后端' },
    { id: 3, name: '前端' },
    { id: 4, name: 'Java' },
    { id: 5, name: 'C++' },
    { id: 6, name: 'Python' },
    { id: 7, name: 'Go' },
    { id: 8, name: 'PHP' },
    { id: 9, name: 'C#.NET' },
    { id: 10, name: '25届秋招热题' },
    { id: 11, name: '真实面经' },
    { id: 12, name: '项目' },
    { id: 13, name: '测试' },
    { id: 14, name: '运维' },
    { id: 15, name: '计算机网络' },
    { id: 16, name: '操作系统' },
    { id: 17, name: '数据库' },
    { id: 18, name: '计算机基础' },
    { id: 19, name: '大数据' },
    { id: 20, name: '考研' },
    { id: 21, name: '移动开发' },
    { id: 22, name: '人工智能' },
    { id: 23, name: '游戏开发' },
    { id: 24, name: '算法' },
    { id: 25, name: '其他' },
    { id: 26, name: '全部' },
  ]);

  // 模拟卡片数据
  const allCards = ref([
    {
      id: 1,
      tagId: 1,
      title: 'Java 热门面试题',
      description: '包含 Java 核心知识及经典面试问题解析。',
      image: '/images/java.png',
      likes: 120,
      stars: 80,
      shares: 45,
    },
    {
      id: 2,
      tagId: 3,
      title: '前端 面试题',
      description: '全面覆盖 HTML、CSS 和 JavaScript。',
      image: '/images/frontend.png',
      likes: 98,
      stars: 65,
      shares: 20,
    },
    // ... 其他卡片
  ]);

  // 当前选中的标签
  const selectedTagName = ref<string>('全部');

  // 标签点击事件
  const handleTagClick = (tag) => {
    router.push({ path: '/blist', query: { tagName: tag.name } });
  };

  // 卡片点击事件
  const handleCardClick = (card) => {
    router.push({
      path: '/blist/detail',
      name: 'detail',
      query: { questionBankId: card.id },
    });
  };

  // 转英文
  onMounted(() => {
    // 检查 tagName 是否存在并且是一个数组，然后将其转换为字符串并以逗号分隔
    const tagNameString: string = Array.isArray(tagName)
      ? tagName.join(',')
      : tagName || ''; // 如果 tagName 是 undefined 或 null，则提供一个默认的空字符串
    selectedTagName.value = tagNameString || '全部';
    // TODO 查询
  });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
    background-color: #ffffff;
    margin-top: 0;

    .page-title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
      padding-top: 20px;
      text-align: center;
      color: #333;
    }

    .tags-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px;
      background: linear-gradient(45deg, #e6f7ff, #bae7ff);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

      .tag-button {
        font-size: 14px;
        color: #333;
        border: none;

        &-primary {
          background-color: #1890ff !important;
          color: #fff !important;
          font-weight: bold;
        }
      }
    }

    .card-container {
      margin-top: 20px;

      .card-col {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
